<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生个人信息</title>
    <link rel="stylesheet" href="css/bootstrap.css" >
    <link rel="stylesheet" href="css/font-awesome.min.css" >
    <link rel="stylesheet" href="css/home.css" >
    <link rel="stylesheet" href="css/layui.css">
</head>
<body>


<div style="text-align: center;padding-top: 50px;">
    <div style="font-size: 35px;  font-family: 幼圆; font-weight: bold;">个人资料修改</div>
    <div class="layui-inline" style="padding-top: 30px; padding-left: 500px">
        <div id="app">
            <form class="layui-form layui-form-pane" action="#" >
            <div class="layui-form-item">
                <label class="layui-form-label">学生姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" v-model="user.u_name" autocomplete="off" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学生密码</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" v-model="user.password" autocomplete="off" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学生邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" v-model="user.email" autocomplete="off" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学生电话</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" v-model="user.phone" autocomplete="off" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                    <label class="layui-form-label">上传头像</label>
                    <button type="button" class="layui-btn" @click ="openUploadWin">
                        <i class="fa fa-upload fa-1x"></i> 选择图片
                    </button>
            </div>



            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="button" id="submit" @click="SumbitForm" style="margin-right: 50%; margin-bottom: 10%" class="layui-btn layui-btn-normal" value="修改">
                </div>
            </div>

                <div id="upload-avatar" style="display: none;padding:10px;">

                    <div @click="chooseAvatar" >

                        <div v-if="currentFile" style="width:300px;height:300px;display:flex;flex-direction: column;align-items: center;justify-content: center;">
                            <img :src="currentImgUrl" style="max-width:100%;max-height: 100%;"/>
                        </div>

                        <div v-else style="width:300px;height:300px;display:flex;flex-direction: column;align-items: center;justify-content: center;border:1px dashed #AAAAAA;">
                            <i class="fa fa-plus fa-3x" style="color:#AAAAAA;cursor: pointer"></i>
                            <div style="font-size:26px;">上传头像</div>
                        </div>


                    </div>

                    <button :disabled="currentFile==null" class="btn btn-primary btn-lg" style="width:100%;margin-top:10px;" @click="uploadAvatar" >上传头像</button>




                </div>

                <input v-show="false" type="file" ref="fileInput" @change="handleFile" />
            </form>


        </div>
    </div>
</div>


<script src="js/jquery-3.6.0.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/vue.global.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/my-axios.js"></script>


<script src="js/layui.js"></script>
<script>
    //定义vue应用配置
    $(function () {

        const app = {
            //data函数专门用来定义数据
            data(){
                return {

                    navWidth:180,
                    user:{
                    u_name:''
                    ,password:''
                    ,email:''
                    ,phone:''
                },
                    currentUser:{},//当前用户信息
                    currentFile:null,//当前图片文件
                    currentImgUrl:null,//当前图片路径

                };
            },


            //定义方法
            methods:{
                //切换导航栏的宽度

                SumbitForm(){
                    myAxios.get('/updateUserInfo',{params:this.user}).then(res=>{
                        layer.msg('修改成功！', {icon: 1},()=>{
                            layer.closeAll();
                        });
                    });
                },

                //打开上传的弹框
                openUploadWin(){
                    layer.open({
                        type:1,
                        title:false,
                        content:$('#upload-avatar')
                    });
                },

                //选择头像
                chooseAvatar(){
                    this.$refs.fileInput.click();//通过程序点击文件框
                },
                //选择图片文件后处理图片文件
                handleFile(){
                    this.currentFile = this.$refs.fileInput.files[0];//获得选中的图片文件

                    let fileReader = new FileReader();
                    fileReader.onload = ()=>{//读取文件完成事件
                        this.currentImgUrl = fileReader.result;//将加载结果（将文件转变为可访问的url）赋值与currentImgUrl
                    };
                    fileReader.readAsDataURL(this.currentFile);//读取文件并转化为url
                },

                //上传头像
                uploadAvatar(){
                    let idx = layer.load();
                    let formData = new FormData();
                    formData.append("avatar",this.currentFile);//"avatar"是参数名

                    myAxios.post("/avatar",formData).then(res=>{
                        layer.close(idx);
                        if(res.data.success){
                            this.getCurrentUser();
                            layer.msg('上传成功！', {icon: 1});
                            this.currentFile = null;
                            this.currentImgUrl  = null;
                        }else{
                            layer.msg(res.data.message, {icon: 2});
                        }
                    }).catch(err=>{
                        layer.close(idx);
                    })
                },
            },

            //定义回调方法：mounted 该方法在页面渲染完成立即执行
            mounted(){
            }
        };

        Vue.createApp(app).mount('#app')
    })
</script>
</body>
</html>